<%@ page import="entity.Banner" %>
<%@ page import="servlet.loginServlet" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: My
  Date: 2021/10/5
  Time: 16:36
  To change this template use File | Settings | File Templates.
--%>

<%
    Object userId = session.getAttribute("userId");
    if(userId == null){
        response.sendRedirect(request.getContextPath()+"/login_page.html");
    }

%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入JSTL核心标签库 --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>校园二手交易平台</title>
    <link rel="icon" href="img/page_icon.png">
    <link href="css/home_page/home_page_circle.css" rel="stylesheet">
    <link href="css/home_page/header_and_nav.css" rel="stylesheet">
    <link href="css/home_page/bottom_ifon_and_feature.css" rel="stylesheet">
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/home/home_page_circle.js"></script>
    <script src="js/home/header_model_js.js"></script>
</head>
<body>
<!--整体结构很明确，就是轮播图的位置用了绝对位置感觉很不好，
然后接下来那些都用了绝对位置，很尴尬-->
<header>
    <span class="short_nav"></span>
    <div class="home_icon">
        <a href="#" style="text-decoration: none;color: white">二手商品交易网</a>
    </div>
    <input type="text" placeholder="Search" name="search" class="nav_search_input">
    <span class="search_icon"></span>
    <span class="user_icon"></span>
    <span class="login_or_register_string">
        <!--判断是否有登陆，两者相互替换-->
        <!--<a href="page/login_page.html">登陆</a> ， <a href="page/login_page.html">注册</a>-->
        <a href="page/personal/personal_info.html" class="user_name_a">这是一个用户名这是一个用户名这是一个用户名</a>
    </span>
</header>
<div class="short_nav_show">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="page/mall_page.html">商城</a></li>
        <li><a href="page/">求购商场</a></li>
        <li><a href="page/publish_product.html">发布商品</a></li>x
        <li><a href="page/require_product.html">发布求购信息</a></li>
        <li><a href="page/shopping_cart.html">我的购物车</a></li>
        <li><a href="javascript:void(0)">反馈与意见</a></li>
        <li><a href="javascript:void(0)">联系我们</a></li>
    </ul>
</div>
<nav class="my_nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="page/mall_page.html">商城</a></li>
        <li><a href="page/">求购商城</a></li>
        <li><a href="page/publish_product.html">发布商品</a></li>
        <li><a href="page/require_product.html">求购商品</a></li>
        <li><a href="page/shopping_cart.html">我的购物车</a></li>
        <li><a href="javascript:void(0)">反馈与意见</a></li>
        <li><a href="javascript:void(0)">联系我们</a></li>
    </ul>
</nav>
<div class="personal_nav">
    <ul>
        <li><a href="page/personal/personal_info.html">个人信息</a></li>
        <li><a href="page/personal/my_publish_product_page.html">我发布的商品</a></li>
        <li><a href="page/personal/my_require_product_page.html">我求购的商品</a></li>
        <li><a class="login_out">退出</a></li>
    </ul>
</div>
<div class="my_slider">
    <%-- 从后端读取banner集合，并且遍历出来   --%>
    <c:forEach items="${bannerList}" var="item" varStatus="status">
            <%--  status.index 默认==0，表示索引，把第一张banner作为当前current样式      --%>
        　　<c:if test="${status.index == 0}">
                <div class="my_slide current">
<%--                    <h1><%=request.getAttribute("title")%></h1>--%>
                    <h1>${item.title}</h1>
                    <p>
                        ${item.content}
                    </p>
                    <div class="slide_img">
                        <img src="img/home/p7.jpg" width="60%">
                    </div>
                </div>
            </c:if>
            <c:if test="${status.index != 0}">
                <div class="my_slide">
                    <h1>${item.title}</h1>
                    <p>
                       ${item.content}
                    </p>
                    <div class="slide_img">
                        <img src="img/home/p5.jpeg" width="60%">
                    </div>
                </div>
            </c:if>
    </c:forEach>
    <%--  banner 左右切换      --%>
    <div class="left_border">
        <span class="left_turn"></span>
    </div>
    <div class="right_border">
        <span class="right_turn"></span>
    </div>
</div>
<div class="featured_products" style="height: 500px">
    <h2>推荐商品</h2>
    <div class="product">
        <img class="double-border" src="img/home/feature_prodects/cont1.jpg" width="100%">
        <span class="product_name">Big block Lether Bag</span>
        <span class="product_cost">$350.00</span><br><br>
        <span class="buy product_1">Buy</span>
    </div>
    <div class="product">
        <img class="double-border" src="img/home/feature_prodects/cont2.jpg" width="100%">
        <span class="product_name">Big block Lether Bag</span>
        <span class="product_cost">$350.00</span><br><br>
        <span class="buy product_2">Buy</span>
    </div>
    <div class="product">
        <img class="double-border" src="img/home/feature_prodects/cont4.jpg" width="100%">
        <span class="product_name">Big block Lether Bag</span>
        <span class="product_cost">$350.00</span><br><br>
        <span class="buy product_3">Buy</span>
    </div>
    <div class="product">
        <img class="double-border" src="img/home/feature_prodects/cont4.jpg" width="100%">
        <span class="product_name">Big block Lether Bag<br></span>
        <span class="product_cost">$350.00</span><br><br>
        <span class="buy product_4">Buy</span>
    </div>
    <div class="product">
        <img class="double-border" src="img/home/feature_prodects/cont1.jpg" width="100%">
        <span class="product_name">Big block Lether Bag</span>
        <span class="product_cost">$350.00</span><br><br>
        <span class="buy product_5">Buy</span>
    </div>
</div>
<div class="home_page_info">
    <div class="bottom_info">
        <h2>
            About Us
        </h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Mauris egestas orci et blandit dictum. Interdum et malesuada fames ac ante
            ipsum primis in faucibus Quisque posuere diam et est hendrerit,
            eget sodales lectus.</p>
    </div>
    <div class="bottom_info">
        <h2>
            Our Blog
        </h2>
        <p>Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Mauris egestas
            orci et blandit dictum. Interdum et malesuada fames ac ante ipsum
            primis in faucibus Quisque posuere diam et est hendrerit,
            eget sodales lectus.</p>
    </div>
    <div class="bottom_info">
        <h2>
            Our Blog
        </h2>
        <p>Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Mauris egestas
            orci et blandit dictum. Interdum et malesuada fames ac ante ipsum
            primis in faucibus Quisque posuere diam et est hendrerit,
            eget sodales lectus.</p>
    </div>
</div>
<footer>
    <p>Copyright © 2021.Company 广西经贸职业技术学院 All rights reserved.</p>
</footer>
</body>
</html>